<template>
    <div>
        <div class='content' style="margin-top: 100px;">
            <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm" size="small" center close-on-click-modal="false">
                <el-form-item label="转移类型" prop="turn_type">
                    <el-select v-model="form.turn_type" placeholder="请选择" @change="typechange">
                        <el-option v-for="(item,index) in options.turntype" :key="index" :label="item" :value="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区县" prop="a_code">
                    <el-select v-model="form.a_code" placeholder="请选择区县">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in options.area_list" :key="index" :label="item.name" :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="楼盘字典" prop="building_id">
                    <el-select v-model="form.w_id" filterable placeholder="请选择" :filter-method="buildingquerySearchAsync">
                            <el-option v-for="item in buildingOpt" :key="item.w_id" :label="item.w_name" :value="item.w_id"></el-option>
                        </el-select>
                </el-form-item>
                <el-form-item label="所属部门" prop="a_d_id">
                    <!-- <el-select v-model="form.a_d_id" @change="obtainUser">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in optionName" :key="index" :label="item.name" :value="item.id"></el-option>
                    </el-select> -->
                     <el-select v-model="form.out_d_id" @change="obtainUser">
                            <!-- <el-option v-for="(item,index) in optionName" :key="index" :label="item.name" :value="item.id"></el-option> -->
                            <el-option-group v-for="group in optionName" :key="group.label" :label="group.label">
                            <el-option v-for="item in group.options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-option-group>
                        </el-select>
                </el-form-item>
                <el-form-item label="业务员" prop="a_uid">
                    <!-- <el-select v-model="form.a_uid">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in userType" :key="index" :label="item.u_username" :value="item.u_id"></el-option>
                    </el-select> -->
                     <el-select v-model="form.out_uid">
                            <el-option v-for="(item,index) in userType" :key="index" :label="item.u_username" :value="item.u_id"></el-option>
                        </el-select>
                </el-form-item>
                <el-form-item label="交易" prop="trading_type">
                    <el-select v-model="form.trading_type" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in transaction" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="form.status" placeholder="请选择">
                        <el-option label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in status" :key="index" :label="item.st_name" :value="item.st_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="日期" prop="a_date_type">
                    <el-select v-model="form.a_date_type" placeholder="请选择">
                        <el-option v-for="(item,index) in options.datetype" :key="index" :label="item" :value="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="超过" prop="a_day_num">
                    <el-input v-model="form.a_day_num" type="number" placeholder="例：1" style="width: 100px;margin-right: 15px;"></el-input>天
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;margin-top: 50px;">
                <el-button @click="cancel('form')" size="mini">取 消</el-button>
                <el-button type="primary" @click="submit('form')" size="mini">开始转移</el-button>
            </div>
        </div>
    </div>
</template>
<style>
    .home .view-content{
        width: 87%;
    }
    .el-form-item__label,.el-form-item__content{
        font-size: 14px;
    }
    .el-input,.el-date-editor.el-input{
        width: 245px;
    }
</style>

<script>
    import conf from '../../../config/userconf.js'
  export default {
    data() {
        return {
            form:{
                turn_type: 0,
                a_date_type: '',
                a_day_num: '0',
                a_d_id: '',
                a_uid: '',
                a_code: '',
                trading_type: '',
                status: '',
            },
            optionName:[],  //部门名称
            userType: [],  //转出人员工
            rules:{
                turn_type: [
                    { required: true, message: '请选择转移类型', trigger: 'change' }
                ],
                a_date_type: [
                    { required: true, message: '请选择日期类型', trigger: 'change' }
                ],
                a_day_num: [
                    { required: true, message: '请输入超过天数', trigger: 'blur' },
                ],

            },
            options: '',  //下拉数据
            transaction: '',  //交易
            status: '',  //状态
             buildingOpt: [],  //楼盘字典下拉
        }
    },
    methods: {
        //楼盘字典
         buildingquerySearchAsync(queryString,data=Object()){
            if(this.form.a_id == ''){
                this.form.building_id = '';
                this.$message({
                    type: 'info',
                    message: '请先选择区县',
                    duration: 1000
                });
            }else if(queryString != ''){
                data.p_id = this.options.province_code;
                data.c_id = this.options.city_code;
                data.a_id = this.form.a_id;
                data.w_spell = queryString;
                conf.buildingdictionary.search(data,(state,res)=>{
                    if (state == 'success'&&res.data.code == 0){
                        // console.log(res);
                        for(var i=0; i<res.data.data.length; i++){
                            res.data.data[i].w_name = res.data.data[i].value;
                        }

                        this.buildingOpt = res.data.data;
                        
                    }else if (state == 'success'&&res.data.code != 0){

                        if(res.data.code == 401){
                            this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                        }else{
                            this.$message({
                                type: 'info',
                                message: res.data.msg
                            });
                        }
                    }
                })
            }
            
        },

        /*  员工房客公私相互转换页面检索条件数据*/
        ruleoptdata (data=null){
            conf.common.publicoptdata(data,(state,res)=>{
                if (state == 'success'&&res.data.code == 0){
                    console.log(res);
                    this.options = res.data.data; 
                    this.transaction =  res.data.data.r_transaction;
                    this.status =  res.data.data.r_status;
                }else if(state == 'success'&&res.data.code != 0){
                    if(res.data.code == 401){
                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                    }else{
                        this.$message({
                            type: 'info',
                            message: res.data.msg
                        });
                    }
                }
            })
        },
        

        //转移类型  change(类型不同，所对应的交易类型和状态也不同)
        typechange(){
            if(this.form.turn_type == 0 || this.form.turn_type == 1){
                this.form.trading_type = '';
                this.form.status = '';
                this.transaction =  this.options.r_transaction;
                this.status =  this.options.r_status;
            }else if(this.form.turn_type == 2 || this.form.turn_type == 3){
                this.form.trading_type = '';
                this.form.status = '';
                this.transaction =  this.options.c_transaction;
                this.status =  this.options.c_status;
            }
        },
        /*取消 */
        cancel (formName) {
            this.$refs[formName].resetFields();
        },
        /*提交 */
        submit (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.judgeprimise();
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        /*判断提交 */
        judgeprimise (data=Object()) {
            conf.common.publicprivate(this.form,(state,res)=>{
                if (state == 'success'&&res.data.code == 0){
                    this.$message({
                        type: 'success',
                        message: '转移成功!'
                    });
                }else if(state == 'success'&&res.data.code != 0){
                    if(res.data.code == 401){
                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                    }else{
                        this.$message({
                            type: 'info',
                            message: res.data.msg
                        });
                    }
                }
            })
        },
        //获取部门
        obtainName(data=Object()){
            conf.department.nameOpt(data,(state,res)=>{
                if (state == 'success'&&res.data.code == 0){
                    this.optionName = res.data.data;
                    // console.log(res); 
                }else if(state == 'success'&&res.data.code != 0){
                    if(res.data.code == 401){
                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                    }else if(res.data.code == -404){
                        this.optionName = [];
                    }else{
                        this.$message({
                            type: 'info',
                            message: res.data.msg
                        });
                    }
                }
            })
        },
        //获取部门员工
        obtainUser(val,data=Object()){
            this.userType = [];
            data.d_id = val;
            conf.department.userOpt(data,(state,res)=>{
                if (state == 'success'&&res.data.code == 0){
                    // console.log(res); 
                    this.userType = res.data.data;
                }else if(state == 'success'&&res.data.code != 0){
                    if(res.data.code == 401){
                        this.$router.push({name:'login'});   //登陆态失效，跳转至登录页
                    }else{
                        this.$message({
                            type: 'info',
                            message: res.data.msg
                        });
                    }
                }
            })
        },
    },
    mounted (){
        this.$nextTick(function(){
            this.ruleoptdata();  //下拉框数据
            this.obtainName();  //部门
        })
    },
        
  }
</script>